<template>
  <!-- 街机-扫雷详情 -->
  <el-dialog v-if="props.show" :modelValue="props.show" custom-class="detailData" :title=" selectToLabel(indexStore.gameArray, props.checkedItem.game_id)+' 详情'" 
    top="12vh" :close-on-click-modal="false" :close-on-press-escape="false" @close="onHideDetails">
    <div class="border-box">
      <template v-for="(item, index) in data.filArr" :key="index">
        <div class="flex list">
          <div class="width20">{{ item.label }}</div>
          <span v-if="item.key=='game_id'">
            <div class="gameIcon marginB5">
              <div class="flex marginR5">
                <el-tag size="small">{{ GameCategory(indexStore.gameArray, props.checkedItem.game_id) }}</el-tag>
                <img class="game-icon" :src="selectToLabel(GAMEICON, props.checkedItem.game_id)" alt="">
              </div>
              {{ selectToLabel(indexStore.gameArray, props.checkedItem.game_id) }}
            </div>
          </span>
          <span v-else-if="item.key == 'win'" :class="colorClass(item.value)">
            {{ item.value }}</span>
          <span v-else>{{ item.value }}</span>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { setTimestampTime } from '@/utils/time'
import { BigWan, BigTofixedTwo } from '@/utils/math'
import { GAMEICON } from '@/config/eunm'
import { selectToLabel, colorClass, GameCategory } from '@/utils/index'
import { getGameReportDetails } from '@/api/player'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  filArr: [] as any[],
})

watch(
  () => [props.checkedItem,props.show],
  async (value) => {
    if (value[0] && value[1]) {
      gameDetails()
    }
  },
)

// 详情
const gameDetails = async() => {
  let query = {
    log_details_id: props.checkedItem.log_details_id,
    game_id: props.checkedItem.game_id
  }
  let dataRes = await getGameReportDetails(query)
  let res = dataRes.data
  console.log('街机详情',res);
  data.filArr = [
    { label: '游戏', value: selectToLabel(indexStore.gameArray, props.checkedItem.game_id), key: 'game_id' },
    { label: '牌局编号', value: props.checkedItem.round_id_str, key: 'round_id_str' },
    { label: '时间', value: setTimestampTime(props.checkedItem.save_time_stamp), key: 'created_time_stamp' },
    { label: '本局下注', value: BigWan(props.checkedItem.bet), key: 'bet' },
    { label: '当局选择雷数', value: res.field_size, key: 'field_size' },
    { label: '游戏步数', value: res.select_num, key: 'select_num' },
    { label: '中雷步数', value: res.cash_out ? 0 : res.select_num, key: 'cash_out' },
    { label: '是否为自动', value: res.is_auto == 1 ? '是' : '否', key: 'is_auto' },
    { label: '中奖倍数', value: BigTofixedTwo(res.x), key: 'x' },
    { label: '结果', value: BigWan(props.checkedItem.win - props.checkedItem.bet), key: 'win' },
  ]
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss">
.border-box {
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text);
}

.list {
  font-weight: bold;
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>